<template>
    <div class="login">
      <div class="loginbox">
        <div class="pic">
          <img src="../assets/u=1522420942,2324605756&fm=26&gp=0.jpg" alt="">
        </div>
        <div class="loginOption">
          <el-form :model="loginform" :rules="rules" ref="loginform" label-width="100px" class="demo-ruleForm">
            <el-form-item label="登陆" prop="username">
              <el-input v-model="loginform.username"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input type="password" v-model="loginform.password"></el-input>
            </el-form-item>
          </el-form>
          <div class="loginBtn">
            <el-button type="primary" @click="loginBtn">登陆</el-button>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import { getEmployeeLogin } from '@/api'
export default {
  data () {
    return {
      // 登陆列表
      loginform: {
        username: '',
        password: ''
      },
      // 登陆规则
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    loginBtn () {
      getEmployeeLogin(this.loginform).then(
        res => {
          if (res.data.success) {
            // 跳转页面
            this.$router.push({path: '/home'})
            // this.$store.state.username = this.loginform.username
            this.$store.dispatch('setActUserName', this.loginform.username)
            console.log(this.$store)
          } else {
            this.$message({
              message: res.data.message,
              type: 'warning'
            })
          }
        }
      )
    }
  }
}
</script>

<style lang="less" scoped>
.login{
    height: 100%;
    background-color: #2f4050;
    padding-top: 200px;
    .loginbox{
        margin: 0px auto;
        width: 400px;
        height: 200px;
        background-color: #fff;
        position: relative;
        padding: 82px 30px 0px 0px;
        .pic{
          width: 100px;
          height: 100px;
          border-radius: 50%;
          overflow: hidden;
          border: 10px solid rgb(250, 246, 246);
          position: absolute;
          top: 0;
          left: 50%;
          transform:translateX(-50%) translateY(-50%);
          box-shadow: 0px 0px 3px 2px #cecaca;
          img{
            display: block;
            width: 100%;
          }
        }
    }
    .loginBtn{
      padding-left: 48px;
      .el-button{
        width: 100%;
        margin: 0px auto;
        display: inline-block;
      }
    }
}
</style>
